Nessa aula, eu apresentei a estrutura inicial do nosso design system, que será a base para a organização e desenvolvimento do nosso projeto. Comecei mostrando o projeto simples que acabamos de abrir, destacando a das variáveis primitivas de cor e espaço, e as diferenças entre size e shape.

Pontos importantes que destaquei para vocês:

• Estrutura Inicial Apresentei a estrutura inicial da tipografia, as variáveis primitivas de cor, espaço, size e shape. Expliquei que size é usado para o tamanho das coisas, como ícones, e shape para formas.
• Paleta de Cores Mostrei a paleta de cores, incluindo cores neutras, cores da marca e variações para light e dark mode. Enfatizei a importância de ajustar as cores para o dark mode para garantir o contraste correto.
• Modos de Uso Expliquei que temos modos de uso para conteúdo, borda e background, e que é importante manter a simplicidade para facilitar o controle e a documentação.
• Escala de Densidade Falei sobre a escala de densidade do design, que vai do XXXS até o XXXL, e como isso influencia no tamanho dos componentes, como padding, ícones e avatares.
• Tokens Primitivos Ressaltei que os tokens primitivos são elementos que não vamos alterar frequentemente.
• Nome do Design System Mencionei que ainda não temos um nome definido para o nosso design system e que esse é o momento para escolher um.
• Organização das Páginas Mostrei como organizar as páginas no Figma, usando caracteres especiais e emojis para categorização visual e como criar páginas em branco para espaçamento.
• Página de Welcome Adiantei que na próxima aula começaremos com a criação da página de Welcome, que servirá como introdução e índice para o design system.
• Componentes e Biblioteca de Ícones Anunciei que começaremos a trabalhar com componentes e que trarei nossa biblioteca de ícones para facilitar o processo de criação.
• Processo Vivo Enfatizei que o design system é um processo vivo, onde ícones e componentes serão adicionados conforme a necessidade.

Por fim, reforcei que na próxima aula já começaremos a montar a página de Welcome e as páginas iniciais, e que a partir daí, iniciaremos o desenvolvimento dos nossos componentes, sempre atualizando e melhorando o design system.